

<!-- 售后退款-列表 -->
<template>
	<view class="content">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="售后退款" rightBtnType="msgCenter" colorTheme="white" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>

		<!-- 顶部选框组件 -->
		<view class="orderType headerNext">
			<slidingMenu :list="list" :color="color" @changes="getIndex"></slidingMenu>
		</view>

		<!-- 退货商品列表 -->
		<view v-if="goodsList && goodsList.length">
			<goodListAfterSale :index="activeIndex" :list='goodsList'></goodListAfterSale>
		</view>
		<g-empty v-else></g-empty>
			
		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	import goodListAfterSale from '@/components/goodList/goodList-afterSale-list';
	import slidingMenu from '@/components/haverster-slidingMenu/haversterSlidingMenu-afterSale';
	
	export default {
		components: {
			goodListAfterSale,
			slidingMenu,
			navHeader,
			detailMenu
		},
		data() {
			return {
				icon: {
					headerBg: '/static/images/common/header.png',
					top: '/static/images/index/top.png',
					msgCenter: '/static/images/common/msg-center-white.png',
					backBtn: '/static/images/common/return-white.png'
				},
				
				//详情菜单
				showDetailMenu: false,
				
				list: ['处理中', '退货退款中', '已完成', '已取消'], //默认传到顶部菜单栏的数据
				activeIndex: 0, ///菜单栏选中状态的index值
				color: '#ffffff', //设置菜单的背景颜色
				
				afterSaleStatus: "01",
				goodsList: [],
				
				//分页相关
				pageNum: 1,
				pageSize: 10
			};
		},
		onShow() {
			
			this.showDetailMenu = false;
			
			this.pageNum= 1;
			//售后列表
			this.getAfterSaleList_fun();
		},
		computed: {
			// ...mapState(['windowTop'])
		},
		methods: {
			
			//详情菜单
			toggleMenuListHandler() {
				console.log("详情菜单-售后列表");
				this.showDetailMenu = !this.showDetailMenu;
			},
			
			// 滑块点击
			getIndex(index) {
				let that = this;
				this.activeIndex = index;
				this.afterSaleStatus = [
					"01", "02", "03", "04"
				][index];
				that.pageNum = 1;
				this.getAfterSaleList_fun();
			},
			
			
			//售后列表
			getAfterSaleList_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/findOrderReturnList',
					method: "POST",
					data: {
						pageNum: that.pageNum,  //页码
						pageSize: that.pageSize, //显示条数
						orderReturnFinalStatus: that.afterSaleStatus //01：处理中 02：退货中 03：已完成 04：已取消
					},
					success: function(res) {
						if(res.data.success) {
							for(let i of res.data.response.results){
								i.goodsBaseInfo = JSON.parse(i.goodsBaseInfo);
							}
							if(res.data.response.results.length == '0'){
								that.$api.msg("没有更多啦");
							}
							if(that.pageNum-0 == 1){
							that.goodsList = res.data.response.results;
							}else{
								for(let i of res.data.response.results){
									that.goodsList.push(i);
								}
							}
						}
					}
				});
			},
			
			
			
		},
		
		onPullDownRefresh() {
			var that = this;
			that.pageNum = 1;
			
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1500);
			
			that.getAfterSaleList_fun();
		},
		onReachBottom() {
			var that = this;
			that.pageNum = that.pageNum + 1;
			
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1500);
			
			that.getAfterSaleList_fun();
		}
	};
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	
	// header部分
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		// box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:#FE5E49;
		}
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	.orderType {
		z-index: 999;
		position: sticky;
			top: 0;}
</style>



